<template>
  <div class="parent">
    <!-- <p class="neikongp">{{ chartsList.requirements }}</p> -->
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, nextTick } from "vue";
import echartsDom from "./echartsDom.vue";
import { any } from "vue-types";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartsList: {
    type: Object,
    default: () => {}
  },
  xaxis: {
    type: Array,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

option.value = {};
const isOnTheHour = timeStr => {
  const regex = /^(?:[01]\d|2[0-3])(?::[0-5]\d){2}$/;
  if (!regex.test(timeStr)) {
    return false;
  }
  const [hours, minutes] = timeStr.split(":");
  return minutes === "00";
};

const fillNullsWithPrevious = data => {
  let previousNonNull = null;
  return data.map(item => {
    if (item == null) {
      return previousNonNull;
    } else {
      previousNonNull = item;
      return item;
    }
  });
};

setTimeout(() => {
  isShowEcharts.value = true;
  option.value = {
    color: [props.color],
    backgroundColor: props.type == "dark" ? "" : "",
    grid: {
      left: "10px",
      top: "40px",
      right: "10px",
      bottom: "0px",
      containLabel: true
    },
    legend: {},
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: [
      {
        show: false,
        type: "category",
        boundarGap: false,
        data: props.xaxis || [],
        interval: 3600 * 1000,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
        // axisLabel: {
        //   formatter: function (value) {
        //     if (isOnTheHour(value)) {
        //       return value;
        //     }
        //     return "";
        //   }
        // }
      },
      {
        type: "category",
        position: "bottom",
        boundarGap: false,
        data: props.xaxis && props.xaxis.length ? props.xaxis.filter((item: any) => item.split(":")[1] === "00") : []
      }
    ],
    yAxis: {
      name:
        props.chartsList.title != null
          ? props.chartsList.unit != null
            ? `${props.chartsList.title}(${props.chartsList.unit})`
            : props.chartsList.title
          : "空",
      type: "value",
      nameLocation: "end",
      nameTextStyle: {
        align: "left"
      },
      // max: 22.5,
      // min: 21.5
      // scale: true,
      max: function (value) {
        let max = Number(props.chartsList.maxValue != null ? props.chartsList.maxValue : Number(value.max).toFixed(2));
        let min = Number(props.chartsList.minValue != null ? props.chartsList.minValue : Number(value.min).toFixed(2));
        let poor = Math.abs(max - min);
        let extreme = Number((poor / 3).toFixed(2));
        let result = max + Math.round(extreme);
        return props.chartsList.max ? props.chartsList.max : result;
      },
      min: function (value) {
        let max = Number(props.chartsList.maxValue != null ? props.chartsList.maxValue : Number(value.max).toFixed(2));
        let min = Number(props.chartsList.minValue != null ? props.chartsList.minValue : Number(value.min).toFixed(2));
        let poor = Math.abs(max - min);
        let extreme = Number((poor / 3).toFixed(2));
        let result = min - Math.round(extreme);
        return props.chartsList.min ? props.chartsList.min : result;
      }
    },
    series: [
      {
        data:
          props.chartsList?.details && props.chartsList?.details.length > 0
            ? fillNullsWithPrevious(props.chartsList?.details.map(item => item.value))
            : [],
        type: "line",
        areaStyle: {
          opacity: 0.15,
          origin: "start"
        },
        symbol: "none",
        markLine: {
          symbol: "none",
          data: [
            {
              name: "内控要求<22.5",
              yAxis: props.chartsList.max != null ? props.chartsList.max : 0,
              lineStyle: {
                color: "#FF0844",
                wideh: "1",
                type: "dashed"
              },
              label: {
                show: true,
                position: "insideEndBottom",
                formatter: `内控要求<${props.chartsList.max != null ? props.chartsList.max : ""}${props.chartsList.unit || ""}`,
                color: "#FF0844"
              }
            },
            {
              name: `内控要求>${props.chartsList.min != null ? props.chartsList.min : ""}`,
              yAxis: props.chartsList.min != null ? props.chartsList.min : 0,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                show: true,
                position: "insideEndTop",
                // formatter: props.chartsList.requirements != null ? props.chartsList.requirements : "",
                formatter: `内控要求>${props.chartsList.min != null ? props.chartsList.min : ""}${props.chartsList.unit || ""}`,
                color: "#FF0000"
              }
            }
          ]
        }
      }
    ]
  };
}, 200);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.neikongp {
  position: absolute;
  top: 15px;
  right: 13px;
  font-size: 12px;
  font-weight: 600;
  color: #ff0844;
}
</style>
